<template>
  <div>
    <!-- 未登录 -->
    <Log v-show="!this.$local.isExist('key')"/>
    <!-- 已登陆 -->
    <div class="container" v-show="this.$local.isExist('key')">
      <div class="content custom">
        <div class="left">
          <div class="icon">
            <div class="avatar" style="posotion:relative;"
              @click="updateIcon">
              <img style="width:80px;"
                :src="userInfo.user_icon ? userInfo.user_icon : 'http://120.77.18.178/api/pic/user_icon/default.png'">
              <div class="updateIcon"><span>更换</span></div>
            </div>
            <p>{{userInfo.user_id ? userInfo.user_id : '用户id'}}</p>
            <p style="color:gray;margin-bottom:30px">{{userInfo.user_name || "用户名"}}</p>
          </div>
          <Person/>
        </div>
        <div class="right">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
          <Popuper ref="cropper">
            <Cropper/>
          </Popuper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {reqUserInfo} from '../api'
import Log from '../components/User/Log'
import Person from '../components/User/Person'
import Popuper from '../components/common/Popuper.vue'
import Cropper from '../components/common/Cropper'
export default {
    name:'User',
    components:{Log,Person,Popuper,Cropper},
    methods: {
      updateIcon(){ //
        this.$refs.cropper.open()
      },
    },
    computed:{
      ...mapState(['userInfo'])
    },
    async mounted() {
      if(this.$local.isExist('key')){
        this.$store.commit('userInfo',(await reqUserInfo(this.$local.get('key')))[0])
      }
    }
}
</script>

<style scoped>
  .updateIcon{
    display: none;
    background: #F8F6F6;
    text-align: center;
    cursor: pointer;
    position: absolute;
    width: 80px;height: 80px;
    margin: auto;
    left: 0;right: 0;top: 0;bottom: 0;
    user-select: none;
  }
  .updateIcon span{
    line-height: 80px;
  }
  .custom{
    text-align:left;
    margin-top: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px 0 gray;
  }
  .left{
    width: 25%;
    float: left;
    background: white;
  }
  .right{
    float: left;
    width: 74%;
    max-height: 500px;
    overflow: auto;
  }
  
  .icon{
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
  }
  .avatar:hover .updateIcon{
    display: block;
  }
  .icon > div{
    width: 80px;
    position: relative;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
  }
  .icon > div img{
    position: absolute;
    max-width: 150%;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .icon p{
    text-align: center;
    margin-top: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
</style>